import {getFullImageUrl} from '@/utils/fileUtil';
import {Modal} from 'antd';
import {useState} from 'react';

interface ImageListProps {
  images: string[];
  record?: any; // 如果需要使用 record，可以在这里定义它的类型
}


/**
 * 查询用的-图片列表组件 【  render: (image,record: API.ProductVO) => <ImageList images={record.images} />,】
 * @param images  图片结合
 * @returns
 */
const ImageList: React.FC<ImageListProps> = ({ images }) => {
  const [visible, setVisible] = useState(false);
  const [currentImage, setCurrentImage] = useState('');

//   console.log("record:",images);

  const showImage = (img: string| undefined) => {
    if (img) {
      setCurrentImage(img);
      setVisible(true);
    }
  };



  return (
    <>
      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
        {Array.isArray(images) ? images.map((img, index) => (
          <img
            key={index}
            src={getFullImageUrl(img)}
            alt={`图片 ${index + 1}`}
            style={{ width: 50, height: 50, objectFit: 'cover', margin: 4, cursor: 'pointer' }}
            onClick={() => showImage(getFullImageUrl(img))}
          />
        )) : null}
      </div>
      <Modal
        open={visible}
        footer={null}
        onCancel={() => setVisible(false)}
      >
        <img alt="大图" style={{ width: '100%' }} src={currentImage} />
      </Modal>
    </>
  );
};

export default ImageList;
